<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数据绑定</title>
    <script type="text/javascript" src="../js/jquery-3.4.1.min.js"></script>
    <script>
        $(function(){
            // 为btn所对应的元素开辟一个数据空间,用来操作数据
            // data(key,value):存储数据,key具有唯一性
            $("#btn").data("id",1);
            $("#btn").data("name","admin");

            $("#btn").click(function(){
                // 如果key重复表示修改数据
                $("#btn").data("id",2);
                // 删除指定key的数据
                $("#btn").removeData("id");
                // data(key):取值
               console.log("当前元素绑定的数据id为:"+$(this).data("id"));
               console.log("当前元素绑定的数据name为:"+$(this).data("name"));
            });
            $("#btn2").click(function(){
               console.log("当前元素绑定的数据id为:"+$(this).data("id"));
            });
        });
    </script>
</head>
<body>
<button id="btn">数据绑定</button><br>
<button id="btn2">数据绑定测试</button><br>
</body>
</html>